<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    
</div>
<script>
    let App={
        template:`
        <div>
            <input type="text" v-model="obj2.obj3.obj4">
            <input type="text" v-model="str2"">
        </div>
    `,
    data(){
        return{
            str:'',
            str2:'',
            obj:{
                a:1
            },obj2:{
                obj3:{
                    obj4:'123',
                    obj5:33
                },
                obj6:'676'
            }
    }
    },
    watch:{
        str(newValue,oldValue) {
            console.log('new',newValue);
            console.log('old',oldValue);
        },"obj.a" (newValue,old){
            console.log(newValue,oldValue);
        },
        obj2: {
            handler(newValue,oldValue){
            console.log('new',newValue);
            console.log('old',oldValue);
        },
        deep:true
    },
    str2:{//computed不支持异步watch支持
        //watch不能滥用尽量用别的方式
        //watch一次只能监视一个值 computed能支持依赖的所有值监听
        //计算属性和方法 computed值执行一次 方法是每次都会执行
        handler (newValue,oldValue){
            setTimeout(()=>{
                console.log('new',newValue);
                console.log('old',oldValue);
            },3000)
            
        },
        immediate:true
    }
    }
}
    new Vue({
        render: h => h(App)
    }).$mount("#app")
</script>
</body>
</html>